<template>
	<view class="goodsContent">
		<view class="goodsLeftList">
			<view class="goodsItem" v-for="(item,index) in goodsLeftList" :key="index" @click="goodsDetail(item.id)">
				<image class="goods_image" :src="item.image_src" @load="onImageLoad" mode="widthFix">
				</image>
				<view class="goods_bottom">
					<view class="goods_title family f500 s24">
						{{item.shop.shopname}}
					</view>
					<view class="goods_name family">
						{{item.title || item.name}}
					</view>
					<view class="price_box flex">
						<view class="price_one fblod family s24">
							￥
						</view>
						<view class="price_two fblod family">
							{{item.price}}
						</view>
						<view class="price_three s24 f500 family">
							￥{{item.praise || item.scribing_price}}
						</view>
					</view>
					<view class="goods_bot_flex flex flexjus">
						<view class="left_box f500 family flex">
							<image class="left_image" src="../static/shopping/fengxiang.png" mode=""></image>
							{{item.sales}}
						</view>
						<view class="left_box f500 family flex">
							<image class="left_image" src="../static/shopping/chakan.png" mode=""></image>
							{{item.sales}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goodsRightList">
			<view class="goodsItem" v-for="(item,index) in goodsRightList" :key="index" @click="goodsDetail(item.id)">
				<image class="goods_image" :src="item.image_src" @load="onImageLoad" mode="widthFix"></image>
				<view class="goods_bottom">
					<view class="goods_title family f500 s24">
						{{item.shop.shopname}}
					</view>
					<view class="goods_name">
						{{item.title || item.name}}
					</view>
					<view class="price_box flex">
						<view class="price_one fblod family s24">
							￥
						</view>
						<view class="price_two fblod family">
							{{item.price}}
						</view>
						<view class="price_three s24 f500 family">
							￥{{item.praise || item.scribing_price}}	
						</view>
					</view>
					<view class="goods_bot_flex flex flexjus">
						<view class="left_box f500 family flex">
							<image class="left_image" src="../static/shopping/fengxiang.png" mode=""></image>
							{{item.sales}}
						</view>
						<view class="left_box f500 family flex">
							<image class="left_image" src="../static/shopping/chakan.png" mode=""></image>
							{{item.sales}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "waterfallFlow",
		props: {
			goodsList: {
				default: [],
				type: Array
			},
			type: {
				default: 0,
				type: Number
			}
		},
		data() {
			return {
				goodsListCount: 0, //加载第i张图片
				// 左侧商品列表
				goodsLeftList: [],
				goodsLeftListHeight: 0,
				// 右侧商品列表
				goodsRightList: [],
				goodsRightListHeight: 0,
			};
		},
		watch: {
			goodsList() {
				this.waterfallImage()
			}
		},
		methods: {
			goodsDetail(ind) {
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id='+ind + '&type=' + this.type
				})
			},
			onImageLoad(e) {
				let that = this
				let divWidth = 336;
				let oImgW = e.detail.width; //图片原始宽度
				let oImgH = e.detail.height; //图片原始高度
				let rImgH = divWidth * oImgH / oImgW; //根据宽高比计算当前载入的图片的高度
				if (rImgH > 356) {
					rImgH = 356; //限制图片最高
				}
				if (that.goodsListCount == 0) {
					that.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight 
					that.goodsListCount++; //图片索引加1
					that.goodsRightList.push(that.goodsList[that
						.goodsListCount]); //添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
				} else {
					that.goodsListCount++; //图片索引加1
					if (that.goodsLeftListHeight > that.goodsRightListHeight) { //把图片的高度加到目前高度更低的栏中
						that.goodsRightListHeight += rImgH; //第二张图片高度加到goodsRightListHeight 
					} else {
						that.goodsLeftListHeight += rImgH;
					}
					if (that.goodsListCount < that.goodsList.length) { //根据目前的栏高，把下一张图片，push到低的那栏
						if (that.goodsLeftListHeight > that.goodsRightListHeight) {
							that.goodsRightList.push(that.goodsList[that.goodsListCount]);
						} else {
							that.goodsLeftList.push(that.goodsList[that.goodsListCount]);
						}
					}
				}
			},
			// 向商品列表添加第一张图片
			waterfallImage() {
				this.goodsLeftList.push(this.goodsList[0]);
			}
		}
	}
</script>

<style scoped lang="scss">
	.goodsContent {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 24upx;
	}

	.goodsLeftList {
		margin: 0 10upx 0 40upx;
		width: 336upx;
	}

	.goodsRightList {
		margin: 0 40upx 0 10upx;
		width: 336upx;
	}

	.goodsItem {
		width: 336upx;
		margin-bottom: 20upx;
		background-color: #FFFFFF;
		border-radius: 8upx;
		.goods_image {
			max-height: 356upx;
			height: auto;
			width: 100%;
			border-radius: 8upx;
		}

		.goods_bottom {
			width: 100%;
			height: 260upx;
			background: #FFFFFF;
			border-radius: 0 0 8upx 8upx;

			.goods_title {
				color: #E7B77D;
				margin-top: 12upx;
				margin-left: 16upx;
			}

			.goods_name {
				width: 300upx;
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
				margin-left: 16upx;
				display: -webkit-box;
				line-height: 42upx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-top: 10upx;
			}

			.price_box {
				margin-left: 16upx;
				margin-top: 10upx;

				.price_one {
					color: #FF3F4A;
					margin-top: 24upx;
				}

				.price_two {
					font-size: 44upx;
					color: #FF3F4A;
				}

				.price_three {
					text-decoration: line-through;
					color: #999999;
					line-height: 70upx;
					margin-left: 12upx;
				}
			}

			.goods_bot_flex {
				padding: 0 16upx 0 16upx;
				margin-top: 10upx;

				.left_box {
					font-size: 20upx;
					color: #666666;
					line-height: 32upx;

					.left_image {
						width: 32upx;
						height: 32upx;
						padding-right: 6upx;
					}
				}
			}
		}
	}
</style>
